<template>
	<view class="smart-item" :style="`background-color: ${backColor};`">
		<view class="row el-flex" :style="`background-color: ${backColor};`">
			<view class="col" v-for="(item,index) in list" :key="index" @click='toShopDetail(item)'>
				<view class="col-box">
					<view class="item-img" :style="`background-image: url(${item.value.goods.img800s});`">

					</view>
					<view class="info-box">
						<text class="name text-ellipsis">{{item.value.goods.name}}</text>
						<text class="info text-ellipsis">{{item.value.goods.summary|summary}}</text>
						<text class="moneys"><text class="cur">￥</text>{{item.value.goods.price/100}} <text class="qi"
								v-if="item.value.goods.multiPrice">起</text></text>
						<text class="del"
							v-if="item.value.goods.marketPrice!=item.value.goods.price">￥{{item.value.goods.marketPrice/100}}</text>
					</view>
					<view class="buy-btn el-flex">
						立即购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "two-row-detail",
		props: {
			list: {
				type: Array,
				default: () => []
			},
			backColor: {
				type: String,
				default: '#fff'
			}
		},
		data() {
			return {

			};
		},
		filters: {
			summary: function(params) {
				if (params.length > 0) {
					params = params.replace(/\n/g, "")
				}
				return params
			},
		},
		methods: {
			toShopDetail(item) {
				let itemId = item.value.goods.itemId
				if (itemId) {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${itemId}`
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.smart-item {
		padding: 0 .2rem;

		.row {
			flex-wrap: wrap;
			justify-content: space-between;
		}



		.col {
			width: 3.36rem;
			margin-bottom: .14rem;
			background-color: #fff;
			padding-bottom: .21rem;
			border-radius: .2rem;

			.col-box {
				border-radius: .14rem;
				overflow: hidden;
				text-align: center;
			}
		}

		.item-img {
			height: 2.25rem;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
			width: 100%;
			background-color: #fff;

			image {
				width: 100%;
				height: 2.25rem;
			}
		}

		.info-box {
			line-height: 1.2;
			padding: 0.1rem 0.21rem;
			background: #fff;
			text-align: left;

			.name {
				display: block;
				font-size: .27rem;
				text-align: left;
				font-weight: bold;
				color: #3c3c3c;
				max-width: 100%;
			}

			.info {
				display: inline-block;
				color: #3c3c3c;
				font-size: .2rem;
				line-height: 1.6em;
				margin-top: .077rem;
				text-align: left;
				width: 100%;
			}

			.moneys {
				font-weight: 600;
				text-align: left;
				font-size: .3rem;
				font-family: Heiti SC, STHeiti;
				line-height: 1.2;
				color: rgb(255, 92, 55);
			}

			.cur {
				font-size: .2rem;
			}

			.qi {
				font-size: .2rem;
			}

			.del {
				text-decoration-line: line-through;
				opacity: 0.5;
				color: rgb(0, 0, 0);
				margin-left: .12rem;
				font-weight: 400;
				margin-top: .096rem;
				font-size: .2rem;
			}
		}

		.buy-btn {
			width: 2.96rem;
			height: .52rem;
			border-radius: .27rem;
			text-align: center;
			margin: auto;
			font-weight: bold;
			font-size: .25rem;
			color: rgb(255, 255, 255);
			background-image: linear-gradient(1.5708rad, rgb(255, 62, 43), rgb(255, 138, 73));
		}
	}
</style>